<script setup>
import {ref} from 'vue';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import http from "@/request/Http.js";


const router = useRouter();
//表单数据
const loginForm = ref({
  username: '',
  password: '',
  role: 'user'
})

//获取组件实例的对象 用组件实例对象调用内部属性与方法获取表单校验转态
const loginFormRef = ref()

//点击登录按钮
const login = async () => {
  //主动调用 表单的调用
  console.log(loginFormRef.value)
  loginFormRef.value.validate(async (val) => {
    //val 是一个布尔值  validate 会主动校验表单规则 返回 通过或者失败
    if (val) {
      //使用单例全局 axios 发送请求
      const response = await http.post("/user/login", loginForm.value)
      console.log(loginForm.value)
      if (response.code === 500) {
          ElMessage.error("登录失败,请重新登录")
      } else if (response.code === 400) {
        ElMessage.error("用户不存在，请重新登录或去注册")
      } else if (response.code === 200) {
          //存储token
          //发起登录请求
          // ElMessageBox.confirm()
        sessionStorage.setItem("token", response.data)
          ElMessage.success("登录成功")
          //路由跳转
        console.log(loginForm.value.role)
        //重置表单
        loginFormRef.value.resetFields()
        if (loginForm.value.role === "user") {
          await router.push('/userHome/showGoodList')
        } else if (loginForm.value.role === "admin") {
          await router.push("/index")
        }
        }
    } else {
      ElMessage.error("登录失败")
    }
  })
};

//定义表单校验 规则列表
const rules = {
  //指定一个字段，指定字段的规则
  username: [
    //非空校验(校验触底规则 触发后的提示信息 触发规则项)
    {required: true, message: "请输入用户名", trigger: 'blur'},
    //长度校验
    {min: 3, max: 22, message: "长度在3-22个字符之间", trigger: 'blur'}
  ],
  password: [
    //非空校验(校验触底规则 触发后的提示信息 触发规则项)
    {required: true, message: "请输入密码", trigger: 'blur'},
    //长度校验
    {min: 6, max: 22, message: "密码长度在6-22个字符之间", trigger: 'blur'}
  ]
}

//去注册
const register = () => {
  //跳转至注册页面
  router.push('/register')
}
</script>

<template>
  <div class="centered-container">

    <!-- 登录卡片 -->
    <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules" class="login-form" label-width="120px">
      <h2 class="form-title">用户登录</h2>
      <!-- 用户名表单项 -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" clearable placeholder="请输入用户名" prefix-icon="User"
                  size="large"></el-input>
      </el-form-item>

      <!-- 密码表单项 -->
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" clearable placeholder="请输入密码" prefix-icon="Lock" size="large"
                  type="password"></el-input>
      </el-form-item>
      <el-form-item label="身份" prop="role">
        <el-select v-model="loginForm.role" class="role-select" placeholder="请选择角色">
          <el-option label="管理员" value="admin"/>
          <el-option label="普通用户" value="user"/>
        </el-select>
      </el-form-item>

      <!-- 登录按钮 -->
      <el-form-item>
        <el-button class="login-button" type="primary" @click="login">
          登录
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-link type="primary" @click="register">无账号去？去注册</el-link>
      </el-form-item>
    </el-form>

  </div>

</template>

<style scoped>
.centered-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://img.shetu66.com/2022/08/cutCoverImg/1663065835196923.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
}

.login-form {
  width: 400px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  /* 柔和阴影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
  transition: transform 0.3s ease-in-out;
}

.login-form:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* 按钮样式 */
.login-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  background-color: #409eff;
  border-color: #409eff;
  transition: all 0.3s ease-in-out;
}

.login-button:hover {
  transform: scale(1.02);
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 输入框样式 */
.el-input {
  border-radius: 8px;
}
</style>
